<template>
  <div>
    <div class="content-container">
      <common-table
        :data="studentList"
        :columns="tableColumns"
        :actions="tableActions"
        :infiniteScroll="hasMore"
        maxActions="200"
        :row-key="'id'"
        @load-more="getDataNextPage"
        ref="tableRef"
      >
        <template #sex="{ row }">{{ row.sex == 0 ? '男' : '女' }}</template>
        <template #progress="{ row }">{{ Number(row.learnProgress) }} %</template>
        <template #capacity="{ row }">
          <el-button link type="primary" @click="handleStudent(row)">查看</el-button>
        </template>
      </common-table>
    </div>
  </div>
</template>

<script setup name="CourseInfo" lang="ts">
import type { ActionButton, TableColumn } from '@/hooks/useElTable';
const tableRef = ref();
const hasMore = ref(false);
const total = ref(0);
const studentList = ref([]);
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10
});
// 操作按钮配置
const tableActions: ActionButton[] = [
  {
    label: '移除',
    color: '#fa4343',
    hasPermi: ['cd:class:removeStudent'],
    handler: (row) => handleDel(row)
  }
];
// 表格列配置
const tableColumns: TableColumn[] = [
  {
    prop: 'majorName',
    label: '所属专业'
  },
  {
    prop: 'className',
    label: '所属班级'
  },
  {
    prop: 'studentNumber',
    label: '学号'
  },
  {
    prop: 'studentName',
    label: '姓名'
  },
  {
    prop: 'sex',
    label: '性别',
    slot: 'sex'
  },
  {
    prop: 'joinTime',
    label: '进班时间'
  },
  {
    prop: 'learnProgress',
    label: '学习进度',
    slot: 'progress'
  },
  {
    prop: 'capacity',
    label: '能力分析',
    slot: 'capacity'
  }
];

onMounted(() => {
  getList();
});
// 触底
const getDataNextPage = () => {
  if (total.value > queryParams.value.pageNum * queryParams.value.pageSize) {
    queryParams.value.pageNum += 1;
    getList();
  }
};

const getList = (type?) => {
  if (type && type == 'update') {
    queryParams.value.pageSize = queryParams.value.pageNum * queryParams.value.pageSize;
    queryParams.value.pageNum = 1;
  }

  httpRequest(queryParams.value)
    .then((res) => {
      const processedRows = res.rows.map((item) => ({ ...item }));

      if (queryParams.value.pageNum == 1) {
        studentList.value = processedRows;
        queryParams.value.pageSize = 20;
      } else {
        studentList.value = [...studentList.value, ...processedRows];
      }

      total.value = res.total;
      hasMore.value = res.total > queryParams.value.pageNum * queryParams.value.pageSize;
    })
    .finally(() => {
      setTimeout(() => {
        tableRef.value.setLoading(false);
      }, 200);
    });
};

// 删除;
const handleDel = (item) => {};

// 查看
const handleStudent = (item) => {};
</script>

<style scoped lang="scss"></style>
